<template>
  <div>
    <div class="outFile_body">
      <div>
        <img src="../assets/others.png" alt="">
        {{ fileName }}
      </div>
      <div>
        <img src="../assets/arrow.png" alt="">
      </div>
      <div>
        <img src="../assets/csv.png" alt="">
        {{ fileFirstName }}.csv
      </div>
      <div>
        <el-button @click="download" :disabled="disabled" type="text" icon="el-icon-circle-check"
          :style="disabled ? 'color:#c0c4cc' : 'color:#aadf59;'">
          立即下载</el-button>
        <el-button @click="drawChart" :disabled="disabled" type="text" icon="el-icon-data-analysis">
          绘制图像</el-button>
      </div>
    </div>
    <el-progress :show-text="false" :stroke-width="5" :percentage="percentage"></el-progress>
  </div>
</template>

<script>
export default {
  name: 'outFileBody',
  props: {
    textData: {
      Array,
      require: true
    },
    fileName: {
      require: true,
      String
    },
    percentage: {
      default: 0,
      Number
    }
  },
  data() {
    return {
      disabled: true,
      fileFirstName: ''
    }
  },
  watch: {
    percentage(n, o) {
      if (n === 100) {
        this.disabled = false;
        this.$emit('loadingTime', 1);
      }
    }
  },
  mounted() {
    this.fileFirstName = this.fileName.split('.')[0];
  },
  methods: {
    download() {
      this.jsonToExcel(
        this.textData[0],
        `${this.fileFirstName + '-parameter.csv'}`);
      this.jsonToExcel(
        this.textData[1],
        `${this.fileFirstName + '-wavelength..csv'}`);
    },
    jsonToExcel(data, csvName) {
      // 通过创建a标签实现
      const link = document.createElement("a");
      // encodeURIComponent解决中文乱码
      link.href = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(data);
      // 对下载的文件命名
      link.download = csvName;
      link.click();
    },
    drawChart() {
      let text_tmp = this.textData[1].split("\r\n");
      let pointList = [];
      text_tmp.forEach((item, index) => {
        //最后一条数据有问题，不信你把if注释了看看
        if (index === text_tmp.length - 1) return
        pointList.push({
          wavelength: item.split(',')[0],
          value: item.split(',')[1]
        });
      });
      //删除数组第一项，掐头去尾，得到一个纯数据的数组
      pointList.shift()
      this.$emit('drawChart', {
        rowData: pointList,
        fileName: this.fileFirstName
      });
    }
  },
}
</script>

<style scoped>
.outFile {
  width: 70%;
  margin-left: 15%;
  background-color: white;
  border-radius: 5px;
}

.outFile .outFile_body {
  height: 80px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.outFile .outFile_body>div {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: #276dc4;
}

.outFile .outFile_body>div:nth-child(2) {
  text-align: center;
}

.outFile .outFile_body>div:nth-child(4) {
  text-align: right;
}

.outFile .outFile_body img {
  height: 25px;
  vertical-align: middle;
  margin: 5px;
}
</style>
